import React, {Component} from 'react';
import $ from 'jquery';
import _ from 'lodash/object';
import * as tools from '../../../tools/tools';
import { Form, Input, DatePicker, Row, Col, TimePicker, Select, Cascader, InputNumber, Modal } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;


class AddAcountForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            confirmDirty: false,
        }
    }

    //添加或者更新
    handleSubmit = (e) => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                if(this.props.isModify == 1) {
                    this.updateAcount(values);
                }else {
                    this.createAcount(values);
                }
            }
        });
    }
    updateAcount = (data) => {
        data.token = localStorage.token;
        data.id = this.props.oldData.id;
        var that = this;
        $.ajax({
            url :  tools.apiUrl + 'manage/up_admin',
            data,
            type : 'post',
            success : function(res) {
                if(res.status == 1) {
                    that.props.onCancel();
                    that.props.onTableUpdate();
                }
            }
        })
    }
    
    createAcount = (data) => {
        data.token = localStorage.token;
        var that = this;
        $.ajax({
            url :  tools.apiUrl + 'manage/administratorsadd',
            data,
            type : 'post',
            success : function(res) {
                if(res.status == 1) {
                    that.props.onCancel();
                    that.props.onTableUpdate();
                }
            }
        })
    }

    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }

    checkPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
            callback('两次输入的密码不一致');
        } else {
            callback();
        }
    }

    checkConfirm = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
          form.validateFields(['password1'], { force: true });
        }
        callback();
    }

    render() {
        const { getFieldDecorator, setFieldsValue } = this.props.form;
        if(this.props.oldData.username != undefined) {
            var oldData = this.props.oldData;
            var ids = oldData.role.map(val => {
                return val.id
            })
        }else {
            var oldData = {};
            var ids = []
        }
        const rolesHtml = this.props.roles.map(val => {
            return <Option key={val.id} value={val.id}>{val.name}</Option>
        });
        console.log('this.props.modalStyle', this.props.modalStyle);
        return (
            <Modal
                {...this.props.modalStyle}
                onCancel={this.props.onCancel}
                onOk={this.handleSubmit}
                bodyStyle={{height:'700px',overflow: 'auto'}}
            >
                <Form 
                    layout='vertical'
                    id={this.props.id}
                >   
                    <div className="modal_add_title">
                        <span>账号信息</span>
                    </div>
                    <Row>
                        <Col span={13}>
                            <FormItem
                                label="账号"
                                hasFeedback
                            >
                                {getFieldDecorator('username', {
                                    rules: [{
                                        max : 20,
                                        required: true,
                                        message: '请输入用户名',
                                    }],
                                    initialValue : oldData.username
                                })(
                                    <Input placeholder="请输入用户名" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={13}>
                            <FormItem
                                label="密码"
                                hasFeedback
                            >
                                {getFieldDecorator('password', {
                                    rules: [{
                                            required: true,
                                            message: '请输入密码',
                                        },{
                                            validator: this.checkConfirm,
                                        },
                                    ],
                                    initialValue : oldData.password
                                })(
                                    <Input type="password" placeholder="请输入密码" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={13}>
                            <FormItem
                                label="确认密码"
                                hasFeedback
                            >
                                {getFieldDecorator('password1', {
                                    rules: [{
                                        required: true,
                                        message: '请输入密码',
                                    }, {
                                        validator: this.checkPassword,
                                    }],
                                    initialValue : oldData.password
                                })(
                                    <Input type="password" placeholder="请再次输入密码" onBlur={this.handleConfirmBlur} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <div className="modal_add_title">
                        <span>个人信息</span>
                    </div>

                    <Row>
                        <Col span={13}>
                            <FormItem
                                label="姓名"
                                hasFeedback
                            >
                                {getFieldDecorator('name', {
                                    rules: [{
                                        required: true,
                                        message: '请输入姓名',
                                    }],
                                    initialValue : oldData.name
                                })(
                                    <Input placeholder="请输入姓名" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={13}>
                            <FormItem
                                label="部门"
                                hasFeedback
                            >
                                {getFieldDecorator('department', {
                                    rules: [{
                                        required: true,
                                        message: '请输入部门',
                                    }],
                                    initialValue : oldData.department
                                })(
                                    <Input placeholder="请输入部门" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={13}>
                            <FormItem
                                label="手机号"
                                hasFeedback
                            >
                                {getFieldDecorator('mobile', {
                                    rules: [{
                                        required: true,
                                        message: '请输入手机号',
                                    }],
                                    initialValue : oldData.mobile
                                })(
                                    <Input placeholder="请输入手机号" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <div className="modal_add_title">
                        <span>角色分配</span>
                    </div>
                    <Row>
                        <Col span={13}>
                        <FormItem
                            label="角色"
                            hasFeedback
                            >
                            {getFieldDecorator('role_ids', {
                                rules: [
                                { required: true, message: '请选择角色', type: 'array' },
                                ],
                                initialValue : ids
                            })(
                                <Select mode="multiple" placeholder="请选择角色">
                                    {rolesHtml}
                                </Select>
                            )}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        )
    }
}
const WrapAddAcountForm = Form.create()(AddAcountForm);

export default WrapAddAcountForm